<template>
  <div class="section msg-section">
    <div class="head">
      <van-nav-bar class="nav-bar">
        <template #left> </template>

        <template #title>
          <div class="title">支部通讯录</div>
        </template>
      </van-nav-bar>
    </div>
    <van-search
        v-model="value"
        show-action
        placeholder="请输入要搜索的联系人"
        @search="onSearch"
      >
      </van-search>
    <!--系统面板-->
    <!-- <yu-card class="user-info-card">
      <template #body>
        <list class="user-info-list" v-for="item in notice" :key="item.id">
          <template #left>
            <div class="inline-block">
              <div class="icon-item">
                <svg-icon :icon-class="item.icon" class-name="tab-bar-icon" ></svg-icon>
                <van-badge v-if="item.nums" :content="item.nums" max="99" />
              </div>
              <span>{{item.name}}</span>
            </div>
          </template>
          <template #right>
            <div>
              <van-icon name="arrow" />
            </div>
          </template>
        </list>
      </template>
    </yu-card> -->

    <!--好友消息面板-->
    <yu-card class="user-info-card friend-notice-card" style="margin-bottom:1.5rem">
      <template #body>
        <div
          class="notice-list"
          v-for="contect in formState.contectList"
          :key="contect.id"
          @click="copyPhone(contect.phone)"
        >
          <div v-if="contect.isShow" class="avatar">
            <img :src="zcAvatar" alt="" />
          </div>

          <div v-if="contect.isShow" class="notice-info">
            <div class="top">
              <div class="user-name ellipsis">{{ contect.name }}</div>
              <div class="time">{{ contect.phone }}</div>
            </div>
            <div class="bottom">
              <div class="notice-content ellipsis">{{ contect.userType }}</div>
            </div>
          </div>
        </div>
      </template>
    </yu-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { getContect } from "/@/api/branch";
import toasts from "/@/views/components/toasts";
import useClipboard from "vue-clipboard3";
import YuCard from "/@/components/YuCard";
import list from "/@/views/components/list/index.vue";
import avatar from "/@/assets/imgs/avatar.png";
import zcAvatar from "/@/assets/imgs/zc-avatar.jpg";
import jbAvatar from "/@/assets/imgs/jb-avatar.jpg";
import ttAvatar from "/@/assets/imgs/tt-avatar.jpg";
import dsAvatar from "/@/assets/imgs/ds-avatar.jpg";

const router = useRouter();
const store = useStore();
const formState = reactive({
  contectList: [],
});
const {	toClipboard } = useClipboard();
const token = store.state.storage.user.token;
const value = ref("");

onMounted(() => {
  getContect(
    {
      token,
    },
    (res) => {
      if (res.code === 0) {
        console.log("获取支部联系人", res);
        formState.contectList = res.contectList;
      }
    }
  );
});

const copyPhone=async (val) => {
				try {
					await toClipboard(val)
					toasts.success('手机号复制成功')
				} catch (e) {
					toasts.fail(e)
				}
			}

const onSearch = (val) => {
  showWhich(val)
}
watch(value,(newValue, oldValue)=>{
  showWhich(newValue)
})

function showWhich(val){
  let list = formState.contectList
  for (let i = 0; i < list.length; i++) {
      let a = val
      let b = list[i].name //日期
      let c = list[i].userType //类型
      let d = list[i].phone //类型
      if ((b.search(a) != -1) || (c.search(a) != -1)|| (d.search(a) != -1)) {
        list[i].isShow = true
      } else {
        list[i].isShow = false
      }
    }
}

const data = [
  {
    id: 1,
    name: "系统通知",
    icon: "system-notice",
    nums: 200,
  },
  {
    id: 2,
    name: "账号消息",
    icon: "notice",
    nums: 0,
  },
  {
    id: 3,
    name: "财务通知",
    icon: "rmb",
    nums: 1,
  },
  {
    id: 4,
    name: "帖子通知",
    icon: "msg",
    nums: 8,
  },
];
const msgs = [
  {
    id: 1,
    avatar: zcAvatar,
    username: "招财",
    msg: "招财是一只英短",
    time: "2021-10-04",
  },
  {
    id: 2,
    avatar: jbAvatar,
    username: "进宝",
    msg: "进宝是一只美短",
    time: "2021-10-04",
  },
  {
    id: 3,
    avatar: ttAvatar,
    username: "坨坨",
    msg: "坨坨是一只阿拉斯加",
    time: "2021-10-04",
  },
  {
    id: 4,
    avatar: dsAvatar,
    username: "大帅",
    msg: "大帅是一头哈士奇",
    time: "2021-10-04",
  },
];

const notice = ref(data);
const friendNotice = ref(msgs);
</script>

<style lang="scss" scoped>
.msg-section {
  .head {
    height: 50px;
    position: relative;
    .nav-bar {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background: var(--yu-linear-bg-color);
      border: none;
      .van-icon {
        color: var(--yu-white-color);
      }
      .title {
        color: var(--yu-white-color);
      }
      &:after {
        border: none;
      }
    }
  }

  .user-info-card {
    padding: 0;
    display: block;
    width: 100%;
    margin-bottom: 8px;
  }

  .user-info-list {
    height: 40px;
    padding: 10px 10px;
    box-sizing: content-box;
    .icon-item {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--yu-linear-bg-color-light);
      color: var(--yu-white-color);
      flex: 0 0 38px;
      margin-right: 16px;
      position: relative;
      .van-badge {
        position: absolute;
        top: -4px;
        right: -4px;
      }
      .svg-icon {
        width: 26px;
        height: 26px;
        margin-top: 7px;
      }
    }
    span {
      display: inline-block;
      font-size: 16px;
      flex: 1;
    }
    .inline-block {
      display: flex;
      -webkit-box-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      align-items: center;
      margin: 0 16px;
      font-size: 16px;
      line-height: 24px;
    }
  }

  .notice-list {
    -webkit-box-flex: 1;
    flex: 1 0 100%;
    width: 100%;
    padding-top: 16px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    .avatar {
      -webkit-box-flex: 0;
      flex: 0 0 38px;
      height: 38px;
      width: 38px;
      margin-left: 8px;
      cursor: pointer;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: var(--yu-border-shadow--light);
      img {
        width: 38px;
        height: 38px;
      }
    }
    .notice-info {
      flex: 1;
      overflow: hidden;
      padding-bottom: 16px;
      margin-right: 16px;
      font-size: 16px;
      border-bottom: 1px solid var(--yu-gray-color--light);
      margin-left: 8px;
      .top {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        height: 20px;
        .user-name {
          max-width: 120px;
          font-weight: 600;
          font-size: 14px;
          text-align: left;
          line-height: 20px;
          color: var(--yu-font-color--dark);
          cursor: pointer;
        }
        .time {
          font-weight: normal;
          font-size: 14px;
          line-height: 22px;
          text-align: left;
        }
      }
      .bottom {
        position: relative;
        padding-top: 4px;
        font-size: 14px;
        color: var(--yu-gray-color);
        line-height: 20px;
        cursor: pointer;
        .notice-content {
          overflow: hidden;
          word-break: break-all;
          text-align: left;
          max-width: 320px;
        }
      }
    }
    &:last-child {
      .notice-info {
        border: none;
      }
    }
  }
}
</style>
